<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="robots" content="noindex, nofollow">
    <title>申请表</title>
	<script type="text/javascript" src="js/jquery.js"></script>
    <script src="https://cdn.ckeditor.com/4.9.2/standard-all/ckeditor.js"></script>
    <style type="text/css">
        /* Minimal styling to center the editor in this sample */
        .container {
            padding: 30px;
            display: flex;
            align-items: center;
            text-align: center;
        }

        .inner-container {
            margin: 0 auto;
        }
    </style>
</head>

<body>
<div class="container" >
    <div class="inner-container">

	<textarea cols="80" id="editor1" name="editor1" rows="10">
		<p><span style="font-size:24px"><strong>&nbsp; &nbsp;贵阳市公安局白云分局执法办案中心使用情况登记表</strong></span></p>
		<table border="1" cellspacing="0">
		<tbody>
			<tr>
				<td rowspan="5" style="vertical-align:top; width:47.3pt">
				<p style="text-align:justify"><span style="font-size:10.5pt"><span style="font-family:Calibri,sans-serif"><span style="font-family:宋体">进</span></span></span></p>

				<p style="text-align:justify"><span style="font-size:10.5pt"><span style="font-family:Calibri,sans-serif"><span style="font-family:宋体">入</span></span></span></p>

				<p style="text-align:justify"><span style="font-size:10.5pt"><span style="font-family:Calibri,sans-serif"><span style="font-family:宋体">办</span></span></span></p>

				<p style="text-align:justify"><span style="font-size:10.5pt"><span style="font-family:Calibri,sans-serif"><span style="font-family:宋体">案</span></span></span></p>

				<p style="text-align:justify"><span style="font-size:10.5pt"><span style="font-family:Calibri,sans-serif"><span style="font-family:宋体">区</span></span></span></p>

				<p style="text-align:justify"><span style="font-size:10.5pt"><span style="font-family:Calibri,sans-serif"><span style="font-family:宋体">人</span></span></span></p>

				<p style="text-align:justify"><span style="font-size:10.5pt"><span style="font-family:Calibri,sans-serif"><span style="font-family:宋体">员</span></span></span></p>

				<p style="text-align:justify"><span style="font-size:10.5pt"><span style="font-family:Calibri,sans-serif"><span style="font-family:宋体">基</span></span></span></p>

				<p style="text-align:justify"><span style="font-size:10.5pt"><span style="font-family:Calibri,sans-serif"><span style="font-family:宋体">本</span></span></span></p>

				<p style="text-align:justify"><span style="font-size:10.5pt"><span style="font-family:Calibri,sans-serif"><span style="font-family:宋体">情</span></span></span></p>

				<p style="text-align:justify"><span style="font-size:10.5pt"><span style="font-family:Calibri,sans-serif"><span style="font-family:宋体">况</span></span></span></p>
				</td>
				<td style="vertical-align:top; width:47.35pt">
				<p style="text-align:justify"><span style="font-size:10.5pt"><span style="font-family:Calibri,sans-serif"><span style="font-family:宋体">姓名</span></span></span></p>
				</td>
				<td style="vertical-align:top; width:47.35pt">
				<p style="text-align:justify">&nbsp;</p>
				</td>
				<td style="vertical-align:top; width:47.35pt">
				<p style="text-align:justify"><span style="font-size:10.5pt"><span style="font-family:Calibri,sans-serif"><span style="font-family:宋体">性别</span></span></span></p>
				</td>
				<td style="vertical-align:top; width:47.35pt">
				<p style="text-align:justify">&nbsp;</p>
				</td>
				<td style="vertical-align:top; width:47.35pt">
				<p style="text-align:justify"><span style="font-size:10.5pt"><span style="font-family:Calibri,sans-serif"><span style="font-family:宋体">出生日期</span></span></span></p>
				</td>
				<td style="vertical-align:top; width:47.35pt">
				<p style="text-align:justify">&nbsp;</p>
				</td>
				<td style="vertical-align:top; width:47.35pt">
				<p style="text-align:justify"><span style="font-size:10.5pt"><span style="font-family:Calibri,sans-serif"><span style="font-family:宋体">联系方式</span></span></span></p>
				</td>
				<td style="vertical-align:top; width:47.35pt">
				<p style="text-align:justify">&nbsp;</p>
				</td>
			</tr>
			<tr>
				<td style="vertical-align:top; width:47.35pt">
				<p style="text-align:justify"><span style="font-size:10.5pt"><span style="font-family:Calibri,sans-serif"><span style="font-family:宋体">身份证种类</span></span></span></p>
				</td>
				<td style="vertical-align:top; width:47.35pt">
				<p style="text-align:justify">&nbsp;</p>
				</td>
				<td style="vertical-align:top; width:47.35pt">
				<p style="text-align:justify"><span style="font-size:10.5pt"><span style="font-family:Calibri,sans-serif"><span style="font-family:宋体">身份证号</span></span></span></p>
				</td>
				<td style="vertical-align:top; width:47.35pt">
				<p style="text-align:justify">&nbsp;</p>
				</td>
				<td style="vertical-align:top; width:47.35pt">
				<p style="text-align:justify">&nbsp;</p>
				</td>
				<td style="vertical-align:top; width:47.35pt">
				<p style="text-align:justify">&nbsp;</p>
				</td>
				<td style="vertical-align:top; width:47.35pt">
				<p style="text-align:justify">&nbsp;</p>
				</td>
				<td style="vertical-align:top; width:47.35pt">
				<p style="text-align:justify">&nbsp;</p>
				</td>
			</tr>
			<tr>
				<td style="vertical-align:top; width:47.35pt">
				<p style="text-align:justify"><span style="font-size:10.5pt"><span style="font-family:Calibri,sans-serif"><span style="font-family:宋体">家庭住址</span></span></span></p>
				</td>
				<td style="vertical-align:top; width:47.35pt">
				<p style="text-align:justify">&nbsp;</p>
				</td>
				<td style="vertical-align:top; width:47.35pt">
				<p style="text-align:justify">&nbsp;</p>
				</td>
				<td style="vertical-align:top; width:47.35pt">
				<p style="text-align:justify">&nbsp;</p>
				</td>
				<td style="vertical-align:top; width:47.35pt">
				<p style="text-align:justify">&nbsp;</p>
				</td>
				<td style="vertical-align:top; width:47.35pt">
				<p style="text-align:justify">&nbsp;</p>
				</td>
				<td style="vertical-align:top; width:47.35pt">
				<p style="text-align:justify">&nbsp;</p>
				</td>
				<td style="vertical-align:top; width:47.35pt">
				<p style="text-align:justify">&nbsp;</p>
				</td>
			</tr>
			<tr>
				<td style="vertical-align:top; width:47.35pt">
				<p style="text-align:justify"><span style="font-size:10.5pt"><span style="font-family:Calibri,sans-serif"><span style="font-family:宋体">进区原由</span></span></span></p>
				</td>
				<td colspan="7" style="vertical-align:top; width:331.45pt">
				<p style="text-align:justify">&nbsp;</p>
				</td>
			</tr>
			<tr>
				<td style="vertical-align:top; width:47.35pt">
				<p style="text-align:justify"><span style="font-size:10.5pt"><span style="font-family:Calibri,sans-serif"><span style="font-family:宋体">进区时间</span></span></span></p>
				</td>
				<td style="vertical-align:top; width:47.35pt">
				<p style="text-align:justify">&nbsp;</p>
				</td>
				<td style="vertical-align:top; width:47.35pt">
				<p style="text-align:justify">&nbsp;</p>
				</td>
				<td style="vertical-align:top; width:47.35pt">
				<p style="text-align:justify">&nbsp;</p>
				</td>
				<td style="vertical-align:top; width:47.35pt">
				<p style="text-align:justify">&nbsp;</p>
				</td>
				<td style="vertical-align:top; width:47.35pt">
				<p style="text-align:justify">&nbsp;</p>
				</td>
				<td style="vertical-align:top; width:47.35pt">
				<p style="text-align:justify"><span style="font-size:10.5pt"><span style="font-family:Calibri,sans-serif"><span style="font-family:宋体">管理员签名</span></span></span></p>
				</td>
				<td style="vertical-align:top; width:47.35pt">
				<p style="text-align:justify">&nbsp;</p>
				</td>
			</tr>
		</tbody>
	</table>
	<p style="text-align:justify">&nbsp;</p>
	</textarea>
    </div>
	<button id="button1" onclick="createWord()">生成word</button>
</div>

<script>
    function escape2Html(str) {
        var arrEntities={'lt':'<','gt':'>','nbsp':' ','amp':'&','quot':'"'};
        return str.replace(/&(lt|gt|nbsp|amp|quot);/ig,function(all,t){return arrEntities[t];});
    }
    function createWord(){
	    var htmlContent = $("#editor1").html();
        htmlContent = escape2Html(htmlContent);

//        var s = htmlContent.replace("/&/g", "&amp;");
//        s = s.replace("/</g", "&lt;");
//        s = s.replace("/>/g", "&gt;");
//        s = s.replace("/\"/g", "&quot;");
	    console.log("htmlContent::---------------------------------------"+htmlContent);
        //打开新窗口保存
        //取得当前日期作为文件名
//        var time=new Date();
//        var filename=time.toLocaleDateString();
//        var winRecord=window.open('about:blank','_blank','top=500');
//        winRecord.document.open("text/html","utf-8");
//        winRecord.document.write("<html><style>body,ul,li{margin:0px; padding:0px;list-style:none; font-size:12px;}</style><body>"+htmlContent+"</body></html>");
//        winRecord.document.execCommand("SaveAs", true, "c:\\"+filename+".doc");
//        winRecord.close();
        var data = "<html><style>body,ul,li{margin:0px; padding:0px;list-style:none; font-size:12px;}</style><body>"+htmlContent+"</body></html>";
        $.ajax({
            type: 'POST',
            url: "/createWord/",
            data: data,
            dataType:'text', //需要的是text格式
            contentType:"application/x-www-form-urlencoded, charset=utf-8",
            success: function(data) {
                //接受到的data还只是一个字符串，需要转成json对象
                var obj = JSON.parse(data);
                if(obj.flag==true){
                    alert("生成本地word成功!");
                }else{
                    alert("error");
                }
            },
            error: function (data)//服务器响应失败处理函数
            {
                alert("出错");
            }
        });

    }
    console.log(document.getElementById("editor1").innerHTML);
    CKEDITOR.replace( 'editor1', {
        // Define the toolbar: https://docs.ckeditor.com/ckeditor4/docs/#!/guide/dev_toolbar
        // The full preset from CDN which we used as a base provides more features than we need.
        // Also by default it comes with a 3-line toolbar. Here we put all buttons in two rows.
        toolbar: [
            { name: 'clipboard', items: [ 'PasteFromWord', '-', 'Undo', 'Redo' ] },
            { name: 'basicstyles', items: [ 'Bold', 'Italic', 'Underline', 'Strike', 'RemoveFormat', 'Subscript', 'Superscript' ] },
            { name: 'links', items: [ 'Link', 'Unlink' ] },
            { name: 'paragraph', items: [ 'NumberedList', 'BulletedList', '-', 'Outdent', 'Indent', '-', 'Blockquote' ] },
            { name: 'insert', items: [ 'Image', 'Table' ] },
            { name: 'editing', items: [ 'Scayt' ] },
            '/',

            { name: 'styles', items: [ 'Format', 'Font', 'FontSize' ] },
            { name: 'colors', items: [ 'TextColor', 'BGColor', 'CopyFormatting' ] },
            { name: 'align', items: [ 'JustifyLeft', 'JustifyCenter', 'JustifyRight', 'JustifyBlock' ] },
            { name: 'document', items: [ 'Print', 'Source' ] }
        ],

        // Since we define all configuration options here, let's instruct CKEditor to not load config.js which it does by default.
        // One HTTP request less will result in a faster startup time.
        // For more information check https://docs.ckeditor.com/ckeditor4/docs/#!/api/CKEDITOR.config-cfg-customConfig
        customConfig: '',

        // Upload images to a CKFinder connector (note that the response type is set to JSON).
        uploadUrl: '/ckfinder/core/connector/php/connector.php?command=QuickUpload&type=Files&responseType=json',

        // Configure your file manager integration. This example uses CKFinder 3 for PHP.
        filebrowserBrowseUrl: '/ckfinder/ckfinder.html',
        filebrowserImageBrowseUrl: '/ckfinder/ckfinder.html?type=Images',
        filebrowserUploadUrl: '/ckfinder/core/connector/php/connector.php?command=QuickUpload&type=Files',
        filebrowserImageUploadUrl: '/ckfinder/core/connector/php/connector.php?command=QuickUpload&type=Images',

        // Sometimes applications that convert HTML to PDF prefer setting image width through attributes instead of CSS styles.
        // For more information check:
        //  - About Advanced Content Filter: https://docs.ckeditor.com/ckeditor4/docs/#!/guide/dev_advanced_content_filter
        //  - About Disallowed Content: https://docs.ckeditor.com/ckeditor4/docs/#!/guide/dev_disallowed_content
        //  - About Allowed Content: https://docs.ckeditor.com/ckeditor4/docs/#!/guide/dev_allowed_content_rules
        disallowedContent: 'img{width,height,float}',
        extraAllowedContent: 'img[width,height,align];span{background}',

        // Enabling extra plugins, available in the full-all preset: https://ckeditor.com/cke4/presets
        extraPlugins: 'colorbutton,font,justify,print,tableresize,uploadimage,uploadfile,pastefromword,liststyle',

        /*********************** File management support ***********************/
        // In order to turn on support for file uploads, CKEditor has to be configured to use some server side
        // solution with file upload/management capabilities, like for example CKFinder.
        // For more information see https://docs.ckeditor.com/ckeditor4/docs/#!/guide/dev_ckfinder_integration

        // Uncomment and correct these lines after you setup your local CKFinder instance.
        // filebrowserBrowseUrl: 'http://example.com/ckfinder/ckfinder.html',
        // filebrowserUploadUrl: 'http://example.com/ckfinder/core/connector/php/connector.php?command=QuickUpload&type=Files',
        /*********************** File management support ***********************/

        // Make the editing area bigger than default.
        height: 1000,
        width: 940,

        // An array of stylesheets to style the WYSIWYG area.
        // Note: it is recommended to keep your own styles in a separate file in order to make future updates painless.
        contentsCss: [ CKEDITOR.basePath + 'contents.css', 'https://sdk.ckeditor.com/samples/assets/css/pastefromword.css' ],

        // This is optional, but will let us define multiple different styles for multiple editors using the same CSS file.
        bodyClass: 'document-editor',

        // Reduce the list of block elements listed in the Format dropdown to the most commonly used.
        format_tags: 'p;h1;h2;h3;pre',

        // Simplify the Image and Link dialog windows. The "Advanced" tab is not needed in most cases.
        removeDialogTabs: 'image:advanced;link:advanced',

        // Define the list of styles which should be available in the Styles dropdown list.
        // If the "class" attribute is used to style an element, make sure to define the style for the class in "mystyles.css"
        // (and on your website so that it rendered in the same way).
        // Note: by default CKEditor looks for styles.js file. Defining stylesSet inline (as below) stops CKEditor from loading
        // that file, which means one HTTP request less (and a faster startup).
        // For more information see https://docs.ckeditor.com/ckeditor4/docs/#!/guide/dev_styles
        stylesSet: [
            /* Inline Styles */
            { name: 'Marker', element: 'span', attributes: { 'class': 'marker' } },
            { name: 'Cited Work', element: 'cite' },
            { name: 'Inline Quotation', element: 'q' },

            /* Object Styles */
            {
                name: 'Special Container',
                element: 'div',
                styles: {
                    padding: '5px 10px',
                    background: '#eee',
                    border: '1px solid #ccc'
                }
            },
            {
                name: 'Compact table',
                element: 'table',
                attributes: {
                    cellpadding: '5',
                    cellspacing: '0',
                    border: '1',
                    bordercolor: '#ccc'
                },
                styles: {
                    'border-collapse': 'collapse'
                }
            },
            { name: 'Borderless Table', element: 'table', styles: { 'border-style': 'hidden', 'background-color': '#E6E6FA' } },
            { name: 'Square Bulleted List', element: 'ul', styles: { 'list-style-type': 'square' } }
        ]
    } );
</script>
</body>

</html>